<template>
  <div>
    <el-main class="col_scroll col_scroll_new" :style="{ '--zoom': zoom }">
      <el-row>
        <el-col :span="13">
          <el-row style="margin: 0" :gutter="26">
            <el-col :span="8">
              <div class="col_scroll">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>走访日历</span>
                    <el-button round @click="pushworkCalendar">查看全部 ></el-button>
                  </div>
                  <el-calendar v-if="calendarType">
                    <template slot="dateCell" slot-scope="{ date, data }">
                      <p :class="calendarBGC(data.day.split('-')[2], date)" @click="timeVisit(date, data)">
                        {{ data.day.split("-")[2] }}
                      </p>
                    </template>
                  </el-calendar>
                </el-card>
              </div>
            </el-col>
            <el-col :span="16" class="">
              <el-card shadow="always" class="col_scroll">
                <el-row class="work_t_b" style="min-width: 600px">
                  <el-col class="work_t_title">
                    <el-row>
                      <el-col :span="3" class="t_title">待走访</el-col>
                      <el-col :span="4">
                        <el-button type="primary" round size="small" class="t_buttpn" @click="addVisit(1)">发起待走访 +
                        </el-button>
                      </el-col>
                      <el-col :span="4" :offset="12" style="text-align: right">
                        <el-button class="button_qb" type="primary" round size="small" @click="pushworkWaitvisit">全部走访记录 >
                        </el-button>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col class="work_b_text" :infinite-scroll-delay="500" :infinite-scroll-disabled="disabled1">
                    <div style="
                        width: calc(100% + 17px);
                        overflow: scroll;
                        overflow-x: hidden;
                        overflow-y: auto;
                        height: 660px;
                        margin: 20px 0 0 0;
                      " ref="scro1" v-infinite-scroll="load_1" infinite-scroll-delay="800"
                      :infinite-scroll-distance="250">
                      <el-table @row-click="tableclick" :header-cell-style="{ backgroundColor: '#f6f4fc' }"
                        :data="tableData1" style="width: 100%">
                        <el-table-column label="企业名称" width="250">
                          <template slot-scope="scope">
                            {{ scope.row.company_name }}
                            <!-- <el-tag class="b_bule red" v-if="!scope.row.company.is_support_visit" size="small">
                              不支持走访
                            </el-tag> -->
                          </template>
                        </el-table-column>
                        <el-table-column label="企业标签">
                          <template slot-scope="scope">
                            <el-tag class="b_bule" size="small" v-for="(item, index) in scope.row.company_label.one"
                              :key="scope.row.demand_id + item.honor.name + index">
                              {{ item.honor.name }}
                            </el-tag>
                            <el-tag class="b_bule" size="small" v-for="item in scope.row.company_label.two"
                              :key="scope.row.demand_id + item.name">
                              {{ item.name }}
                            </el-tag>
                            <el-tag class="b_bule" size="small" v-for="item in scope.row.company_label.three"
                              :key="scope.row.demand_id + item.name">
                              {{ item.name }}
                            </el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column label="走访时间">
                          <template slot-scope="scope">
                            <div>
                              <div style="display: flex; justify-content: center">
                                <el-tag class="b_bule red" v-if="expire(scope.row.v_time)" size="small">
                                  逾期
                                </el-tag>
                                <span class="time">
                                  {{ scope.row.v_time | formatDate }}
                                </span>
                              </div>
                              <el-button type="primary" round size="small" class="goVisit"
                                @click.stop="goVisit(scope.row)">
                                马上走访</el-button>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>

          </el-row>
        </el-col>

        <el-col :span="11">
          <!-- style="margin: 20px 0 40px 0" -->
          <el-col :span="24" >
            <el-card shadow="always" class="col_scroll">
              <el-row class="work_t_b" style="min-width: 700px">
                <el-col class="work_t_title">
                  <el-row>
                    <el-col :span="3" class="t_title">需求跟进</el-col>
                    <el-col :span="4">
                      <el-button type="primary" round size="small" class="t_buttpn" @click="addVisit(2)">添加需求 +
                      </el-button>
                    </el-col>
                    <el-col :span="4" :offset="13" style="text-align: right">
                      <el-button class="button_qb" type="primary" round size="small" @click="pushworkFollow">全部需求记录 >
                      </el-button>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col class="work_b_text work_b_text2">
                  <div style="
                        width: calc(100% + 17px);
                        overflow: scroll;
                        overflow-x: hidden;
                        overflow-y: scroll;
                        height: 660px;
                        margin: 20px 0 0 0;
                      " ref="scro2" v-infinite-scroll="load_2">
                    <el-table @row-click="tableclick" :header-cell-style="{ backgroundColor: '#f6f4fc' }"
                      :data="tableData2" style="width: 100%">
                      <el-table-column prop="demand_des" label="需求内容" width="210">
                        <template slot-scope="scope">
                          <div class="textDes">{{ scope.row.demand_des }}</div>
                        </template>
                      </el-table-column>
                      <!-- <el-table-column prop="company_name" label="企业名称" width="220">
                        </el-table-column> -->
                      <el-table-column label="企业名称" width="200">
                        <template slot-scope="scope">
                          {{ scope.row.company_name }}
                          <!-- <el-tag class="b_bule red" v-if="!scope.row.company.is_support_visit" size="small">
                            不支持走访
                          </el-tag> -->
                        </template>
                      </el-table-column>
                      <el-table-column label="需求标签" width="150">
                        <template slot-scope="scope">
                          <el-tag class="b_bule b_red" size="small" v-for="(item, index) in scope.row.demand_name"
                            :key="scope.row.id + item.name + index">
                            {{ item.name }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column prop="so_id_name" label="解决人">
                      </el-table-column>
                      <el-table-column width="140" label="待解决时间" align="center">
                        <template slot-scope="scope">
                          <div>
                            <span class="time">
                              {{ scope.row.solve_time | formatDate }}
                            </span>
                            <el-button type="primary" round size="small" class="goVisit"
                              @click.stop="goVisit(scope.row)">马上跟进</el-button>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>

          <!-- <el-row style="margin: 0" :gutter="10"> 
            <el-col :span="24" class="">
              <el-card shadow="always" class="b_list_box col_scroll">
                <el-row class="work_b_box">
                  <el-col class="work_b_title">
                    <el-row>
                      <el-col :span="12" class="b_title">
                        <div style="margin-right: 10px">专利榜单</div>
                        <el-button type="primary" round size="small" class="t_buttpn" @click="export1">导出
                        </el-button>
                      </el-col>
                      <div class="right_text">
                        <span class="text_2" :class="rankListType == 0 ? 'text_1' : ''"
                          @click="handleClick_1(0)">累计数据</span>
                        <span style="user-select: none">|</span>
                        <span class="text_2" :class="rankListType == 1 ? 'text_1' : ''"
                          @click="handleClick_1(1)">上月更新</span>
                      </div>
                    </el-row>
                  </el-col>
                  <el-col class="work_b_text_b">
                    <Ranking v-loading="loading" :b_tableData_3="b_tableData_3" :b_tableData_3_date="b_tableData_3_date"
                      @headerClick="headerClick"></Ranking>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>-->
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import companyGrade from "./components/companyGrade.vue";
import Ranking from "./components/Ranking.vue";
import { companyStreet, visitDetailtwo, rankList, companyRank } from "@/api/newuser";
import { VUE_APP_BASE_API } from "@/config";

import { demandListNews, visitList, patRank, calendar } from "@/api/configApi";

export default {
  components: { companyGrade, Ranking },
  data() {
    return {
      zoom: 1,
      user_id: this.$store.state.user.id,
      value: ["01", "13", "20", "25"],
      value1: null,
      activeName_1: "first",
      activeName_3: "总量",
      tableData1: [],
      tableData1_page: 1,
      tableData1_none: false,
      companyTypeName: "顺德",
      tableData2: [],
      tableData2_none: false,
      tableData2_page: 1,
      b_tableData_3: [],
      b_tableData_3_date: "",
      calendarList: [],
      calendarType: false,
      dataListType: 2,
      rankListType: 0,
      disabled1: false,
      disabled2: false,
      loading: true,
      companyStreetId: 0,
      companyStreetType: 0,
      todayDate: "",
    };
  },
  created() {
    this.calendar();
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;

    //获取今天日期时间戳
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    //this.todayDate转时间戳
    this.todayDate = new Date(year + "-" + month + "-" + day + " 00:00:00").getTime();
  },
  //过滤器
  filters: {
    //日期格式化
    formatDate: function (value) {
      if (value) {
        return value.substring(0, 10);
      }
    },
  },
  mounted() {
    this.rankList();
  },
  methods: {
    export1() {
      window.open(
        `${VUE_APP_BASE_API}/v1/export/patRank?status=${this.rankListType + 1}&type=${this.companyStreetType
        }&is_export=1`
      );
    },
    expire(time) {
      let date = new Date(time).getTime();
      if (date < this.todayDate) {
        return true;
      } else {
        return false;
      }
    },
    rankList() {
      this.b_tableData_3 = [];
      this.loading = true;
      patRank({
        region_id: this.$store.state.user.region_id,
        status: this.rankListType + 1,
        type: this.companyStreetType,
      }).then((res) => {
        console.log(res, "asdgfayuda");
        this.loading = false;
        this.b_tableData_3 = res.list;
      });
    },
    calendar() {
      calendar({
        id: this.user_id,
      }).then((res) => {
        this.calendarList = res;
        this.calendarType = true;
      });
    },
    visitList(type) {
      visitList({
        type: type,
        page: 1,
        limit: 10,
      }).then((res) => {
        if (type == 1) {
          this.tableData1 = res.list;
        } else {
          this.tableData2 = res.list;
        }
      });
    },
    calendarBGC(Now, date) {
      let bgc = this.calendarList.map((item) => {
        return new Date(item.date).getTime();
      });
      let timestamp = new Date(date).getTime(); //时间戳
      let timestampNow = new Date().getTime(); //当前时间戳
      let activation = bgc.indexOf(timestamp); //激活状态
      if (activation != -1) {
        if (timestamp > timestampNow) {
          return "is-selected";
        } else {
          return "is-selected1";
        }
      }
    },
    handleClick_1(index) {
      this.rankListType = index;
      this.rankList();
    },
    headerClick(e) {
      this.companyStreetType = e;
      this.rankList();
    },
    pushworkWaitvisit() {
      this.$router.push({
        path: "/workWaitvisit2",
        query: {
          type: 3,
        },
      });
    },
    pushworkFollow() {
      this.$router.push({
        path: "/workWaitvisit3",
        query: {
          type: 5,
        },
      });
    },
    pushworkTobear() {
      // this.$router.push('/workTobear')
      this.$router.push({
        path: "/workTobear",
        query: {
          type: this.dataListType,
        },
      });
    },
    pushworkWarning() {
      this.$router.push("/workWarning");
    },
    pushworkCompany() {
      this.$router.push("/workCompany");
    },
    pushworkCalendar() {
      // this.$router.push('/workCalendar')
      this.$router.push({
        path: "/workWaitvisit2",
        query: {
          type: 3,
        },
      });
    },
    tableclick(row, column, event) {
      this.$router.push({
        path: "/workEnterprisevisit",
        query: {
          id: row.id,
          company_id: row.company_id,
        },
      });
    },
    tableclickAlways(row) {
      this.$router.push({
        path: "/workEnterprisevisit",
        query: {
          company_id: row.company_id,
          company_name: row.company_name,
        },
      });
      //判断是否有走访记录
      // visitDetailtwo({
      //   company_id: row.company_id
      // }).then(res => {
      //   // console.log(res);
      //   if (res.list.length == 0) {
      //     this.$router.push(
      //       {
      //         path: '/addWaitvisit',
      //         query: {
      //           company_name: row.company_name,
      //           company_id: row.company_id,
      //         }
      //       }
      //     )
      //   } else {
      //     this.$router.push({
      //       path: '/workEnterprisevisit',
      //       query: {
      //         company_id: row.company_id,
      //       }
      //     })
      //   }
      // })

      // this.$router.push({
      //   path: '/workEnterprisevisit',
      //   query: {
      //     company_id: row.company_id,
      //   }
      // })
    },
    timeVisit(date, data) {
      console.log(date, data);
      let bgc = this.calendarList.map((item) => {
        return new Date(item.date).getTime();
      });
      let type = this.calendarList.map((item) => {
        return item.status;
      });
      let timestamp = new Date(date).getTime(); //时间戳
      let timestampNow = new Date().getTime(); //当前时间戳
      let activation = bgc.indexOf(timestamp); //激活状态

      if (activation != -1) {
        this.$router.push({
          path: "/workWaitvisit",
          query: {
            time: data.day,
            type: 4,
          },
        });
      } else {
        this.$message.error("暂无走访日程");
      }
    },
    addVisit(type) {
      if (type == 1) {
        this.$router.push("/addWaitvisit");
      } else {
        this.$router.push("/addDemand");
      }
    },
    load_1() {
      if (this.tableData1_none) return;
      visitList({
        type: 1,
        page: this.tableData1_page,
        limit: 10,
      }).then((res) => {
        let heightBox = this.$refs.scro1.scrollHeight;
        this.tableData1_page += 1;
        console.log(res, this.tableData1, "asda");
        if (this.tableData1.length < res.count) {
          this.tableData1.push(...res.list);
          this.$refs.scro1.scrollTo(0, heightBox - res.list.length * 45);

          console.log("正在加载数据", this.tableData1);
        } else {
          this.tableData1_page -= 1;
          // console.log('没有更多数据了');
          this.tableData1_none = true;
          this.disabled1 = true;
        }
      });
    },
    load_2() {
      if (this.tableData2_none) return;
      demandListNews({
        user_id: this.user_id,
        type: 2,
        page: this.tableData2_page,
        limit: 10,
      }).then((res) => {
        let heightBox = this.$refs.scro2.scrollHeight;
        this.tableData2_page += 1;
        if (this.tableData2.length < res.count) {
          this.tableData2.push(...res.list);
          this.$refs.scro2.scrollTo(0, heightBox - res.list.length * 45);
        } else {
          this.tableData2_page -= 1;
          this.tableData2_none = true;
          this.disabled2 = true;
        }
      });
    },
    // tableFollow(row, column, event) {
    //   this.$router.push('/workEnterprisevisit')
    // },
    // empty() {
    //   this.add_form = {
    //     name: '',
    //     time: '',
    //     Visitpeople: '',
    //     enterprise: []
    //   }
    // },
    // close() {
    //   // console.log('关闭');
    //   // this.empty()
    //   this.addVisit = false
    // },
    // preservation() {
    //   // console.log('保存');
    //   this.empty()
    //   this.addVisit = false
    //   this.$router.push('/workWaitvisit')
    // },
    goVisit(row) {
      console.log(row);
      this.$router.push({
        path: "/workVisit",
        query: {
          id: row.have_visit != 2 ? row.id : row.demand_id,
          have_visit: row.have_visit,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.dp_h {
  height: 415px;
}

.textDes {
  //一行超出显示省略号
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
}

.red {
  background-color: #ff5f58 !important;
  color: #fff !important;
}

::v-deep .el-calendar-table td.is-today {
  background-color: #f2f8fe;

  .el-calendar-day {
    border: 1px solid #409eff !important;
    border-radius: 5px;
  }
}

.b_bule {
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
}

.b_red {
  color: #ff5f58;
  background-color: #fff6f5;
}

.b_red2 {
  color: #ffffff;
  background-color: #ff5f58;
}

.is-selected {
  background-color: #387dff;
  color: #fff;
  border-radius: 5px;
}

.is-selected1 {
  background-color: #6e798d;
  color: #fff;
  border-radius: 5px;
}

.button_qb {
  background-color: #ecf3ff;
  color: #3e7ef5;
  border: none;
  font-size: 14px;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
  background-color: #f4f5f7;
  padding: 0;
}

.t_buttpn {
  font-size: 14px;
}

.item_list {
  display: inline-block;
  background-color: #d3e2ff;
  margin: 0px 5px;
  border-radius: 5px;
  padding: 0px 5px;
  color: #387dff;
  font-weight: initial;
  font-size: 10px;
}

.item_list_tag {
  padding: 0px 5px;
  margin-top: 3px;
  margin-right: 3px;
}

.item_demand {
  color: #fff;
  font-size: 14px;
  background-color: #ff5f58;
  margin-top: 5px;
}

.item_demand:nth-child(1) {
  margin-top: 0;
}

.item_demand2 {
  background-color: #fff6f5;
  font-size: 14px;
  color: #ff5f58;
  border: 1px solid #ff5f58;
}

::v-deep .el-card {
  border-radius: 10px;
}

::v-deep .b_list_box {
  .el-card__body {
    padding: 0;
  }

  .work_b_text_b {
    // padding: 0 20px 20px 20px;
    // height: 798px;
    // overflow: hidden;
    // overflow-x: hidden;
    // overflow-y: auto;
    width: 102%;

    .work_b_text_b_tabs_3 {
      .el-tabs__header {
        .el-tabs__nav-wrap {
          .el-tabs__nav-scroll {
            .el-tabs__nav {
              /*.el-tabs__item {*/
              /*  padding: 0 20px !;*/
              /*}*/

              // .el-tabs__item:nth-child(2) {
              //   padding: 0 60px 0 0 !important;
              // }

              // .el-tabs__item:nth-child(3) {
              //   padding: 0 60px 0 60px !important;
              // }

              // .el-tabs__item:nth-child(4) {
              //   padding: 0 0 0 60px !important;
              // }
            }
          }
        }
      }

      .el-tabs__content {
        .el-tab-pane {
          .b_tableData_3_box {
            .el-table__header-wrapper {
              thead {
                tr th:nth-child(2) {
                  text-align: left;
                  /*padding: 0 40px;*/
                }
              }
            }

            .el-table__body-wrapper {
              table {
                tr td:nth-child(1) {
                  // text-align: left;
                  color: #387dff;
                  font-weight: bolder;
                  font-size: 16px;
                }

                tr td:nth-child(2) {
                  text-align: left;
                  color: #334681;
                  font-weight: initial;
                }
              }
            }
          }
        }
      }
    }

    .el-tabs {
      .el-tabs__header {
        .el-tabs__nav-wrap {
          .el-tabs__nav-scroll {
            .el-tabs__nav {
              // .el-tabs__item {
              //   padding: 0 40px;
              // }
              // .el-tabs__item:nth-child(2) {
              //   padding: 0 60px 0 0;
              // }

              // .el-tabs__item:nth-child(3) {
              //   padding: 0 60px
              // }

              // .el-tabs__item:nth-child(4) {
              //   padding: 0 0 0 60px;
              // }
            }
          }
        }
      }

      .el-tabs__content {
        .el-tab-pane {
          .b_tableData_3_box {
            .el-table__header-wrapper {
              thead {
                tr th:nth-child(2) {
                  // text-align: center;
                  /*padding: 0 40px;*/
                }
              }
            }

            .el-table__body-wrapper {
              table {
                tr td:nth-child(1) {
                  // text-align: center;
                  color: #387dff;
                  font-weight: bolder;
                  font-size: 16px;
                }

                tr td:nth-child(2) {
                  text-align: initial;
                  color: #334681;
                  font-weight: initial;
                }
              }
            }
          }
        }
      }
    }

    .table_2 {
      .el-table__header-wrapper {
        margin-top: 6px;

        .has-gutter {
          tr {
            th {
              padding: 6px 0 12px 0;
            }
          }

          tr th:nth-child(2) {
            text-align: center;

            .cell {
              padding: 0;
            }
          }
        }
      }
    }

    .el-table {
      font-size: 10px;

      .el-table__header-wrapper {
        .has-gutter {
          tr th {
            font-weight: inherit;
            color: #334681;
            font-size: 14px;

            .cell {
              // padding: 0 0 0 10px;
            }
          }

          tr th:nth-child(2),
          tr th:nth-child(3),
          tr th:nth-child(4),
          tr th:nth-child(5),
          tr th:nth-child(6),
          tr th:nth-child(7),
          tr th:nth-child(8) {
            text-align: center;
            font-size: 14px;
          }
        }

        font-weight: initial;
      }

      .el-table__body-wrapper {
        table {
          tbody {
            tr td {
              font-size: 14px;
              text-align: center;
              color: #334681;
            }

            tr td:nth-child(2),
            tr td:nth-child(3) {
              text-align: center;
              // color: #387DFF;//前面两个模块的颜色
              // font-weight: bolder;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

.work_b_box {
  min-width: 602px;
  // overflow: hidden;

  .work_b_title {
    padding: 20px;
    // background-color: #387DFF;
    text-align: right;

    .right_text {
      position: absolute;
      top: 4px;
      right: 0;
      font-size: 16px;

      .text_1 {
        color: #4995f4 !important;
        zoom: var(--zoom);
        cursor: pointer;
      }

      .text_2 {
        zoom: var(--zoom);
        cursor: pointer;
      }
    }

    // button {
    //   background-color: #fff;
    //   color: #387dff;
    // }

    .b_title {
      font-size: 22px;
      font-weight: bolder;
      // color: #fff;
      text-align: left;
      display: flex;
      align-items: center;

      .el-dropdown-link {
        color: #2a65fb !important;
        background-color: #ebf2fe !important;
        display: inline-block;
        padding: 8px 10px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: initial !important;

        .el-popper {
          position: absolute;
          left: 0;
          top: 24px;
          width: 100px;
          z-index: 999999;
          font-size: 14px;
          line-height: 24px;
          background-color: #0e1941;
          color: #4995f4;
          cursor: pointer;
          transform: scale(0);
          transform-origin: 0 0;
          transition: all 0.2s;

          .el-popper-item {
            padding: 5px;
          }

          .el-popper-item:hover {
            color: #68d8fe !important;
            background-color: #28293f !important;
          }

          .el-popper-item-active {
            color: #68d8fe !important;
            background-color: #28293f !important;
          }
        }
      }

      .el-dropdown-link:hover {
        .el-popper {
          transform: scale(1);
        }
      }
    }
  }
}

.col_scroll {
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
}

.col_scroll_new {
  zoom: var(--zoom);
}

::v-deep .box-card {
  min-width: 280px;

  .el-card__header {
    border: none;
    padding: 20px 9px 20px 7px;
  }

  .el-card__body {
    padding: 0;

    .el-calendar__header {
      padding: 0px 20px 12px 20px;
      border-bottom: 0px solid #ebeef5;

      .el-calendar__title {
        // display: none;
        font-size: 12px;
      }

      .el-calendar__button-group {

        // width: 100%;
        // text-align: center;
        .el-button-group {
          .el-button {
            padding: 7px 9px;
          }
        }
      }
    }

    .el-calendar__body {
      padding: 0 9px 7px;

      thead {
        th {
          color: #334681;
          background-color: #f5f6f9;
          font-size: 16px;
        }
      }

      tbody {
        margin-top: 13px !important;

        .el-calendar-table__row {
          .el-calendar-day {
            margin: 1px;
            box-sizing: border-box;
          }

          .prev {
            border: none;
            // pointer-events: none;
            font-size: 12px;
          }

          .current {
            font-size: 12px;
            border: none;
          }

          .next {
            border: none;
            font-size: 12px;
            // pointer-events: none;

            // p {
            //   background-color: #fff !important;
            //   color: #C0C4CC !important;
            // }
          }

          .el-calendar-day {
            height: 42px;
            line-height: 42px;
            text-align: center;
            padding: 0;
          }
        }
      }
    }
  }

  .clearfix {
    font-size: 22px;
    font-weight: bold;

    span {
      vertical-align: middle;
    }

    button {
      font-size: 14px;
      float: right;
      padding: 9px 15px;
      background-color: #ecf3ff;
      border: none;
      color: #3e7ef5;
    }
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
}

::v-deep .work_t_b {

  // height: 415px;
  .work_t_title {
    text-align: rights;

    .t_title {
      font-size: 22px;
      font-weight: bolder;
      line-height: 32px;
      text-align: left;
    }
  }

  .work_b_text {
    // margin: 20px 0 0 0;
    // height: 660px;
    // overflow: scroll;
    // overflow-x: hidden;
    // overflow-y: auto;
    // width: 100%;
    overflow: hidden;

    .el-table {
      .el-table__header-wrapper {
        table {
          .has-gutter {
            tr th {
              font-weight: initial;
              font-size: 14px;
              color: #334681;
            }

            tr th:nth-child(3) {
              text-align: center;
            }
          }
        }
      }

      .el-table__body-wrapper {
        table {
          tbody {
            tr td {
              font-size: 14px;
              height: 58px;
            }

            tr:hover {
              td:nth-child(3) {

                .red,
                .time {
                  display: none;
                }

                .goVisit {
                  display: block;
                  margin: 0 auto;
                }
              }
            }

            tr td:nth-child(3) {
              text-align: center;

              .time {
                display: block;
              }

              .goVisit {
                display: none;
              }
            }
          }
        }
      }
    }

    .item_list {
      /*display: inline;*/
      background-color: #d3e2ff;
      /*margin: 3px 5px;*/
      border-radius: 5px;
      padding: 5px 10px;
      color: #387dff;
      font-size: 14px;
      /*height: 20px;*/
      /*line-height: 20px;*/
    }

    .item_demand {
      color: #ff5f58;
      background-color: #fff6f5;
    }
  }

  .work_b_text2 {
    .el-table {
      .el-table__header-wrapper {
        table {
          .has-gutter {
            tr th:nth-child(4) {
              text-align: center;
            }
          }
        }
      }

      .el-table__body-wrapper {
        table {
          tbody {
            tr:hover {

              // td:nth-child(4) {
              //   text-align: center;
              // }
              td:nth-child(5) {
                .time {
                  display: none;
                }

                .goVisit {
                  display: block;
                  margin: 0 auto;
                }
              }
            }

            tr {

              td:nth-child(5),
              td:nth-child(4) {
                text-align: center;

                .time {
                  display: block;
                }

                .goVisit {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

.text_one {
  color: #334681;
  word-break: keep-all;
  white-space: nowrap;
  // overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 5px;
}

.text_one::before {
  content: "";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  top: 50%;
  left: 5px;
  border-radius: 50%;
  background: #387dff;
  transform: translate(-50%, -50%);
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
